<template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="form.username" required>
      </div>
      <div>
        <label for="email">电子邮件:</label>
        <input type="email" id="email" v-model="form.email" required>
      </div>
      <div>
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="form.password" required>
      </div>
      <div>
        <label for="bio">个人简介:</label>
        <textarea id="bio" v-model="form.bio"></textarea>
      </div>
      <div>
        <label for="image">头像链接:</label>
        <input type="text" id="image" v-model="form.image">
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';

const form = ref({
  username: '',
  email: '',
  password: '',
  bio: '',
  image: ''
});

const submitForm = async () => {
  try {
    const response = await axios.post('/api/users', {
      username: form.value.username,
      email: form.value.email,
      password: form.value.password,
      bio: form.value.bio,
      image: form.value.image
    });
  } catch (error) {
    console.error("注册新用户失败:",error);
  }
};
</script>
